<template>
  <div class="box" :class="{'showMenu':showMenu}">
		<div id="content-box">
      <header-app :show-menu.sync="showMenu">{{title}}</header-app>
      <div id="router-box">
        <router-view></router-view>
      </div>
      <!--footer-nav-bar-->
      <nav-bar></nav-bar>
      <div class="sidebar-mask" v-show="showMenu" @click="showMenu = !showMenu"></div>
    </div>
    <!--侧边栏-->
    <sidebar-app :show-menu.sync="showMenu"></sidebar-app>
  </div>
</template>
<script>
  var header = require("../../components/mobile/header.vue");
  var nav = require("../../components/mobile/nav-bar.vue");
  var sidebar = require("../../components/mobile/sidebar.vue");
  export default{
    data(){
      return {
        showMenu:false,
        element:"",
        title:"首页"
      }
    },
    components:{
      headerApp:header,
      navBar:nav,
      sidebarApp:sidebar
    }
  }
</script>
<style scoped>
  #router-box{
    width:100%;
    position:absolute;
    top:0.95rem;
    bottom:0.9rem;
  }
  .box,
  #content-box{
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:10;
    position:relative;
  }
  #content-box,
  .sidebar-box{
    -webkit-transition:transform 0.28s;
    -moz-transition:transform 0.28s;
    transition:transform 0.28s;
  }
  #content-box{
    background:#fff;
  }
  /*遮罩*/
  .sidebar-mask{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
  }
  /*显示*/
  .showMenu #content-box{
    -webkit-transform:translate3d(6rem , 0 , 0);
    -ms-transform:translate3d(6rem , 0 , 0);
    -moz-transform:translate3d(6rem , 0 , 0);
    transform:translate3d(6rem , 0 , 0);
  }
</style>
